<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <TodoHeader @addTodo="addTodo" />

    <!-- 列表区域 -->
    <TodoMain :todos="todos" @delTodo="delTodo" />

    <!-- 统计和清空 -->
    <TodoFooter v-if="todos.length" :todos="todos" @clearTodos='clearTodos'/>

  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
       todos: JSON.parse(localStorage.getItem('my-todos'))||[]
    }
  },
  methods:{
    addTodo(todo){
      this.todos.unshift(todo)
    },
    delTodo(id){
      this.todos=this.todos.filter(item=>item.id!==id)
    },
    clearTodos(){
      this.todos=[]
    }
  },
  watch:{
    todos:{
      deep:true,
      immediate:true,
      handler(newValue){
        localStorage.setItem('my-todos',JSON.stringify(newValue))
      }
    }
  }
}
</script>

<style>

</style>
